<template>
  <view class="conbox">
    <view class="container">
      <!-- 背景 -->
      <image src="/static/images/bg.png" class="cont" mode=""></image>
      <image src="/static/images/caidai.png" class="caidai" mode=""></image>
      <view class="header">
        <view class="header-title">
          <view class="left">
            次数： <text style="color: #E4431A;">{{chishu}}</text>
          </view>
          <view class="right" @click="getmyPrize">
            我的奖品 >
          </view>
        </view>
      </view>
      <view class="main">
        <view class="canvas-container">

          <view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
            <!-- <view :animation="animationData" class="canvas-content" id="zhuanpano"  :style="[{transform:'rotate('+runDeg+')'}]"> -->
            <!-- <canvas class="canvas" canvas-id="canvas"></canvas> -->
            <view class="canvas-line">
              <view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1" :style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
            </view>

            <view class="canvas-list">
              <view class="canvas-item" :style="[{zIndex:index2}]" v-for="(iteml,index2) in awardsList" :key="index2">
                <view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
                  <text>{{iteml.award}}</text>
                  <image class="canvas-item-text-img" src="/static/images/xiaolian.png" v-if="iteml.type == 3"></image>
                  <image class="canvas-item-text-img" src="/static/images/youhuiquan.png" v-if="iteml.type == 2"></image>
                  <image class="canvas-item-text-img" src="/static/images/jingyan.png" v-if="iteml.type == 1"></image>
                  <image class="canvas-item-text-img" src="/static/images/jifenimg.png" v-if="iteml.type == 0"></image>
                </view>
              </view>
            </view>
          </view>

          <view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始 </view>
        </view>
      </view>
      <!-- 现金抽奖 -->
      <view class="typecheckbox">
        <view :class="mold==1?'left active':'left'" @click="choosetype(1)">
          幸运抽奖
        </view>
        <view :class="mold==2?'left active':'left' " @click="choosetype(2)">
          现金抽奖
        </view>
      </view>
      <!-- 规则 -->
      <view class="guize">
        <view class="title">
          规则说明
        </view>
        <view class="g_item">
          1.用户每天登录即送1次抽奖机会，分享好友则多赠1次机会
        </view>
        <view class="g_item">
          2.用户点击大转盘抽奖按钮，有积分和现金两种方式可参与抽奖，没抽一次消耗1次抽奖机会
        </view>
        <view class="g_item">
          3.用户获得的奖品，可在我的道具里查看
        </view>
      </view>
      <!-- 我的奖品 -->
      <view class="shadowbox" v-if="r_flg" @click="closeshadow">
        <view class="myrewards" @click.stop="openshadow">
          <view class="title">
            我的奖品
          </view>
          <view class="itembox">
            <view class="item" v-for="(items,i) in myPrizelist" :key="i">
              <text class="left">{{items.name}}</text>
              <text class="right">{{items.createtime}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import api from "@/utils/api";
import util from "@/utils/util";
export default {
  data() {
    return {
      awardsConfig: {
        chance: true, //是否有抽奖机会
        lists: [
          {index: 0,id: 11,mold: 1,type: 1,name: "积分1点",amount: "1.00",scale:"0.50"},
          {index: 1,id: 22,mold: 1,type: 1,name: "积分1点",amount: "2.00",scale: "0.10"},
          {index: 2,id: 33,mold: 1,type: 1,name: "积分1点",amount: "3.00",scale: "0.20"},
          {index: 3,id: 44,mold: 1,type: 1,name: "积分1点",amount: "4.00",scale: "0.10"},
         
        ] //奖品列表
      },
      awardsList: {},
      animationData: {},
      btnDisabled: "",
      thanksarr: [], //存储谢谢参与的索引
      chishu: 10,
      mold: 1,
      r_flg: 0,
      myPrizelist: []
    };
  },
  onLoad: function() {
    // 获取奖品列表
    // this.initdata(this);
    this.drawAwardRoundel();
  },
  onReady: function(e) {},
  methods: {
    // 查看奖品
    getmyPrize() {
      var that = this;
      that
        .requestFun(
          "/api/Turntable/myPrize",
          {
            page: 1,
            num: 1000
          },
          1
        )
        .then(function(data) {
          data.lists.forEach(function(element, index) {
            element.createtime = that.dateformat(element.createtime);
          });
          that.myPrizelist = data.lists;

          that.r_flg = 1;
        });
    },
    openshadow() {
      this.r_flg = 1;
    },
    closeshadow() {
      this.r_flg = 0;
    },
    // 选择抽奖方式
    choosetype(val) {
      this.mold = val;
      // this.initdata(this);
    },

    // 初始化抽奖数据
    initdata: function(that) {
      that
        .requestFun(
          "/api/Turntable/integralLucky",
          {
            mold: that.mold
          },
          1
        )
        .then(function(data) {
          that.awardsConfig = data;
          that.chishu = data.luckdraw;
          // 获取奖品的个数
          let awarrlength = that.awardsConfig.lists.length;
          // push 谢谢参与奖项
          for (var i = 0; i <= 3 * 2; i++) {
            if (i % 3 == 0) {
              that.thanksarr.push(i);
              that.awardsConfig.lists.splice(i, 0, {
                name: "谢谢参与",
                type: 0
              });
            }
          }
          // 为每一项追加index属性
          that.awardsConfig.lists.forEach(function(element, index) {
            element.index = index;
          });

          // 画转盘
          that.drawAwardRoundel();
        });
    },

    //画抽奖圆盘
    drawAwardRoundel: function() {
      // 拿到奖品列表
      var awards = this.awardsConfig.lists;
      var awardsList = [];
      // 每份奖品所占角度
      var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值
      // 奖项列表
      for (var i = 0; i < awards.length; i++) {
        awardsList.push({
          turn: i * turnNum + "deg", //每个奖品块旋转的角度
          lineTurn: i * turnNum + turnNum / 2 + "deg", //奖品分割线的旋转角度
          award: awards[i].name, //奖品的名字,
          type: awards[i].type,
          id: awards[i].type
        });
      }
      this.btnDisabled = this.chishu ? "" : "disabled";
      this.awardsList = awardsList;
    },

    //发起抽奖
    playReward: function() {
      var that = this;

      // that.runDeg = 60*Math.random()
      if (this.chishu == 0) {
        uni.showToast({
          title: "抽奖次数已经用完",
          icon: "none"
        });
        return;
      }

      // 获取奖品
      that
        .requestFun(
          "/api/Turntable/winningPrize",
          {
            mold: that.mold
          },
          1
        )
        .then(function(data) {
          var awardIndex = 3;
          that.awardsList.forEach(function(element, index) {
            if (element.award == data.name) {
              awardIndex = index;
            }
          });
          //中奖index
          var awardsNum = that.awardsConfig.lists;
          // var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
          var runNum = 4; //旋转8周
          var duration = 4000; //时长

          // 旋转角度
          that.runDeg = that.runDeg || 0;
          let preDeg = that.runDeg;
          that.runDeg =
            that.runDeg +
            (360 - that.runDeg % 360) +
            (360 * runNum - awardIndex * (360 / awardsNum.length)) +
            1;
          //创建动画
          if (process.env.VUE_APP_PLATFORM == "h5") {
            // document.styleSheets[0]
            document.getElementById("zhuanpano").style =
              "animation:rotate_before 4s 0ms ease forwards;";
            if (document.styleSheets[0].cssRules.length > 0) {
              Array.from(document.styleSheets[0].cssRules).forEach(function(
                element,
                index
              ) {
                if (element.name == "rotate_before") {
                  // 删除上次插入的动画
                  document.styleSheets[0].deleteRule(index);
                }
              });
            }

            // console.log(document.styleSheets[0].cssRules)
            // console.log("@keyframes rotate_before{from{ transform: rotate("+preDeg+"deg); }to{ transform: rotate("+that.runDeg+"deg);}}")
            // 插入定义的动画
            document.styleSheets[0].insertRule(
              "@keyframes rotate_before{from{ transform: rotate(" +
                preDeg +
                "deg); }to{ transform: rotate(" +
                that.runDeg +
                "deg);}}",
              8
            );
          } else {
            var animationRun = uni.createAnimation({
              duration: duration,
              timingFunction: "ease"
            });
            animationRun.rotate(that.runDeg).step();
            that.animationData = animationRun.export();
          }
          // 					// #ifndef H5
          // 					console.log(document.styleSheets)
          // 					document.getElementById('zhuanpano')
          // 					// #endif
          that.btnDisabled = "disabled";

          // 中奖提示
          var awardsConfig = that.awardsConfig;
          var awardType = awardsConfig.lists[awardIndex].type;
          that.chishu = that.chishu - 1;
          if (awardType != 0) {
            setTimeout(
              function() {
                uni.showModal({
                  title: "恭喜",
                  content: "获得" + awardsConfig.lists[awardIndex].name,
                  showCancel: false,
                  success: function() {
                    // 置空style  否则动画不生效
                    setTimeout(function() {
                      document.getElementById("zhuanpano").style = "";
                    }, 1000);
                  }
                });
                that.btnDisabled = "";
              }.bind(that),
              duration
            );
          } else {
            setTimeout(
              function() {
                uni.showModal({
                  title: "很遗憾",
                  content: "没中奖 " + awardsConfig.lists[awardIndex].name,
                  showCancel: false,
                  success: function() {
                    // 置空style  否则动画不生效
                    setTimeout(function() {
                      document.getElementById("zhuanpano").style = "";
                    }, 1000);
                  }
                });
                that.btnDisabled = "";
              }.bind(that),
              duration
            );
          }
        });
    }
  }
};
</script>
<style lang="less">
.conbox {
  width: 750rpx;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.container,
image.cont {
  width: 750rpx;
  min-height: 100vh;
  height: auto;
  position: relative;
}

image.cont {
  height: 100%;
  position: absolute;
  z-index: 0;
}

image.caidai {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 1024rpx;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* height: 246rpx; */
  padding-top: 48rpx;
  padding-bottom: 40rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
}

.header-title {
  width: 100%;
  height: 60rpx;
  display: flex;
  align-items: center;
  padding: 0 48rpx;
  box-sizing: border-box;
  justify-content: space-between;
}

.header-title > view {
  padding: 8rpx 16rpx;
  border: 1px solid #d89720;
  color: #d89720;
  font-size: 28rpx;
  border-radius: 26rpx;
}

/* 转盘 */
.canvas-container {
  margin: 0 auto;
  position: relative;
  width: 600rpx;
  height: 600rpx;
  background: url("")
    no-repeat;
  background-size: cover;
  border-radius: 50%;
}

.canvas {
  width: 100%;
  height: 100%;
  display: block !important;
  border-radius: 50%;
}

.canvas-content {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 600rpx;
  height: 600rpx;
  border-radius: inherit;
  /* background-clip: padding-box; */
  /* background-color: #ffcb3f; */
}

.canvas-element {
  position: relative;
  z-index: 1;
  width: inherit;
  height: inherit;
  border-radius: 50%;
}

.canvas-list {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 9999;
}

.canvas-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #e4370e;
  /* text-shadow: 0 1rpx 1rpx rgba(255, 255, 255, 0.6); */
}

.canvas-item-text {
  position: relative;
  display: block;
  padding-top: 46rpx;
  margin: 0 auto;
  text-align: center;
  -webkit-transform-origin: 50% 300rpx;
  transform-origin: 50% 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fb778b;
}

.canvas-item-text text {
  font-size: 30rpx;
}

.canvas-item-text-img {
  width: 50rpx;
  height: 50rpx;
  padding-top: 30rpx;
}

/* 分隔线 */
.canvas-line {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 99;
}

.canvas-litem {
  position: absolute;
  left: 300rpx;
  top: 0;
  width: 3rpx;
  height: 300rpx;
  background-color: rgba(228, 55, 14, 0.4);
  overflow: hidden;
  -webkit-transform-origin: 50% 300rpx;
  transform-origin: 50% 300rpx;
}

/**  
* 抽奖按钮  
*/
.canvas-btn {
  position: absolute;
  left: 260rpx;
  top: 260rpx;
  z-index: 400;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  color: #f4e9cc;
  background-color: #e44025;
  line-height: 80rpx;
  text-align: center;
  font-size: 26rpx;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.canvas-btn::after {
  position: absolute;
  display: block;
  content: " ";
  left: 12rpx;
  top: -44rpx;
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 30rpx;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #e44025;
}

.canvas-btn.disabled {
  pointer-events: none;
  background: #b07a7b;
  color: #ccc;
}

.canvas-btn.disabled::after {
  border-bottom-color: #b07a7b;
}

.canvas-btn-table {
  color: #a83fdb;
  width: 120rpx;
  text-align: center;
  position: absolute;
  left: 240rpx;
  top: 360rpx;
  font-size: 26rpx;
  background-color: #ffffff;
  opacity: 0.9;
}

.typecheckbox {
  width: 100%;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  box-sizing: border-box;
  color: #fff;
  font-size: 28rpx;
  top: -120rpx;
  flex-direction: column;
  height: 180rpx;
  align-items: flex-end;
  /* padding-top: 46rpx; */
}

.typecheckbox view {
  border: 1px solid #ff3637;
  background: transparent;
  color: #ff3637;
  display: flex;
  height: 60rpx;
  width: 140rpx;
  border-radius: 50rpx;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-left: 20rpx;
}

.typecheckbox view.active {
  background: #ff3637;
  color: #fff;
}

.guize {
  width: 502rpx;
  min-height: 300rpx;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 3;
  background-image: linear-gradient(-180deg, #f48549 0%, #f2642e 100%);
  border: 18rpx solid #e4431a;
  border-radius: 16px;
  margin: 0 auto;
  margin-top: -104rpx;
  padding: 48rpx;
  /* box-sizing: border-box; */
  color: #fff;
}

.guize .title {
  text-align: center;
  margin-bottom: 28rpx;
}

.guize .g_item {
  font-family: PingFang-SC-Medium;
  font-size: 24rpx;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-align: justify;
  line-height: 20px;
}

.shadowbox {
  width: 750rpx;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.myrewards {
  width: 600rpx;
  min-height: 80rpx;
  background: #ffeedf;
  border: 10rpx solid #f2692f;
  color: #333;
  font-size: 24rpx;
  font-family: PingFang-SC-Medium;
  border-radius: 40rpx;
  padding-bottom: 20rpx;
}

.myrewards .title {
  font-family: PingFang-SC-Bold;
  font-size: 16px;
  color: #e4431a;
  letter-spacing: 0.57px;
  display: flex;
  padding-top: 36rpx;
  justify-content: center;
}

.myrewards .itembox {
  max-height: 320rpx;
  overflow-y: auto;
}

.myrewards .item {
  width: 100%;
  height: 66rpx;
  padding: 0 32rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
